<script setup lang="ts">

import {useRoute} from "vue-router";
import {ref} from "vue";
import {holeDelete, holeDetail} from "@/http/tree/treeHole";
import router from "@/router";
import {showDialog, showSuccessToast} from "vant";

// 接收传过来的id
const route = useRoute()
const id = route.query.id

// 树洞详情请求
const holeInformation = ref<object>({})

// 树洞详情请求
holeDetail(id).then(res => {
    // console.log(res)
   if (res.code==200){
       holeInformation.value = res.data
   }else if (res.code==401){
       router.push('/denglu')
   }
    // console.log(teacherInformation.value)
})

// 删除树洞

const del = function () {
    // 弹出确认删除
    showDialog({
        message: '你确定要删除这个树洞吗？',
    }).then(() => {
        holeDelete([holeInformation.value.id]).then(res => {
            // console.log(res)
            showSuccessToast('删除成功')
            router.push('/tree')
        })
    });

}
const onClickLeft = () => history.back();

</script>

<template>
    <van-nav-bar
            :placeholder=true
            title="详细信息"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
    />
    <div class="whole">
        <h3>
            {{ holeInformation.title }}
        </h3>
        <div class="content">
            &nbsp;&nbsp;&nbsp;&nbsp;{{ holeInformation.content }}
        </div>
        <div class="footer">
            <div class="time">{{ holeInformation.createTime }}</div>
            <button @click="del">
                <van-icon name="delete-o" size="20"/>
            </button>
        </div>
    </div>
</template>

<style scoped lang="less">

.whole {
  width: 90%;
  margin: 0 auto;

  .content {
    margin-top: 3vh;
  }

  .footer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: fixed;
    bottom: 3vh;

    .time {
      width: 50%;
    }

    button {
      width: 30%;
      font-size: 20px;
      border: none;
      background-color: transparent;
    }
  }
}
</style>